<!--已鉴定-->
<template>
  <div class="tab3">
    <div class="tab3-operate">
      <a-dropdown placement="bottomRight">
        <a-button type="primary" icon="upload">报表导出</a-button>
        <a-menu slot="overlay">
          <a-menu-item key="1">已鉴定目录</a-menu-item>
          <a-menu-divider />
          <a-menu-item key="2">已鉴定批量导出</a-menu-item>
          <a-menu-divider />
          <a-menu-item key="3">已鉴定专题目录</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <div class="card-table">
      <left-tree
        :isShowLeftTree.sync="isShowLeftTree"
        :treeData="treeData">
      </left-tree>
      <div class="appraisal-right" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
        <el-table
          :data="appraisalTableData"
          stripe
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <slot v-for="(item,index) in appraisalColumns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="loadImg">
        <a-tooltip placement="left">
          <template slot="title">
            <span>下一页</span>
          </template>
          <div class="loadImg-icon">
            <a-icon type="step-forward"></a-icon>
          </div>
        </a-tooltip>
        <a-tooltip placement="left">
          <template slot="title">
            <span>全部数据</span>
          </template>
          <div class="loadImg-icon">
            <a-icon type="fast-forward"></a-icon>
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { LeftTree } from '@/components'
export default {
  name: '',
  components: {
    LeftTree
  },
  data () {
    return {
      appraisalTableData: [
        {
          Index: 1,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-001',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '保密',
          CreateTime: '1959-12-01'
        },
        {
          Index: 2,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-002',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '机密',
          CreateTime: '1969-12-01'
        },
        {
          Index: 3,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-003',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '绝密',
          CreateTime: '1979-12-01'
        },
        {
          Index: 4,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-004',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '秘密',
          CreateTime: '1989-12-01'
        },
        {
          Index: 5,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-003',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '绝密',
          CreateTime: '1979-12-01'
        },
        {
          Index: 6,
          FMType: '数据汇总以卷整理',
          TableName: '汇总档案案卷表',
          Code: '1999-JJ-004',
          Topic: '江西环境工程职业学院1989-2008年房屋所有权证',
          BGQXData: '永久',
          Security: '秘密',
          CreateTime: '1989-12-01'
        }
      ],
      appraisalColumns: [
        {
          title: '顺序号',
          field: 'Index'
        },
        {
          title: '归档方式',
          field: 'FMType'
        },
        {
          title: '表名',
          field: 'TableName'
        },
        {
          title: '档号',
          field: 'Code'
        },
        {
          title: '标题',
          field: 'Topic'
        },
        {
          title: '保管期限',
          field: 'BGQXData'
        },
        {
          title: '密级',
          field: 'Security'
        },
        {
          title: '创建日期',
          field: 'CreateTime'
        }
      ],
      isShowLeftTree: false,
      treeData: [
        {
          title: '1990',
          key: '1'
        },
        {
          title: '2000',
          key: '2'
        },
        {
          title: '2020',
          key: '3',
          children: [
            {
              title: '1月',
              key: '4'
            },
            {
              title: '2月',
              key: '5'
            },
            {
              title: '3月',
              key: '6'
            },
            {
              title: '4月',
              key: '7'
            },
            {
              title: '5月',
              key: '8'
            }
          ]
        }
      ]
    }
  },
  created () {},
  mounted () {},
  methods: {
  }
}
</script>

<style lang="less" scoped>
.tab3 {
  width: 100%;
  height: 100%;
  padding: 0 10px 10px;
  .tab3-operate {
    height: 50px;
    display: flex;
    align-items: center;
  }
  .card-table {
    height: calc(100% - 50px);
    position: relative;
    .appraisal-right {
      float: left;
      width: 82%;
      height: 100%;
      transition: all 0.2s;
    }
    .loadImg {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 15px;
      top: 50%;
      margin-top: -35px;
      z-index: 10;
      .loadImg-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
        cursor: pointer;
        background: #FFF;
        text-align: center;
        line-height: 36px;
        margin-bottom: 6px;
        border-radius: 50%;
        position: relative;
        display: block;
        box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1), inset 0px -1px 0px 0px rgba(0,0,0,0.1);
        &:hover {
          background: #fcfcfc;
        }
        &:active {
          background: #EEE;
        }
        .anticon {
          color: #8c92a4;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
